<template>
  <div class="card-wrap">
    <bk-card>
      <template #header>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <span>{{ props.title }}</span>
          <i class="bk-icon icon-angle-right"></i>
        </div>
      </template>
      <p v-for="item in props.list" :key="item.id">{{ item.title }}</p>
      <bk-pagination
        type="compact"
        align="right"
        :current.sync="defaultPaging.current"
        :count.sync="defaultPaging.count"
        :limit="defaultPaging.limit"
      >
      </bk-pagination>
    </bk-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { bkCard, bkPagination } from "bk-magic-vue";

const props = defineProps({
  title: {
    type: String,
    default: " 默认标题",
  },
  list: {
    type: Array,
    default: () => [
      { id: 1, title: "卡片内容 1" },
      { id: 2, title: "卡片内容 2" },
      { id: 3, title: "卡片内容 3" },
    ],
  },
});

const defaultPaging = ref({
  current: 1,
  limit: 10,
  count: 300,
});
</script>
